<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
    <!--ztree-->
    <link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <style>
        body .table > tbody > tr > td:last-child{
            overflow: visible;
        }
    </style>
    <title>链路追踪视图</title>
</head>
<body class="skin-default">

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <!--视图块-->
            <div class="container-fluid card">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <!--检索栏-->
                        <form class="form-inline search-bar" id="pageForm">
                            <div class="form-group">
                                <label class="control-label">链路ID：&nbsp;</label>
                                <input type="text" name="traceId" class="form-control">
                            </div>
                            <div class="form-group">
                                <label class="control-label">KEY：&nbsp;</label>
                                <input type="text" name="key" class="form-control">
                            </div>
                            <div class="form-group">
                                <label class="control-label">方法名：&nbsp;</label>
                                <input type="text" name="methodName" class="form-control">
                            </div>
                            <div class="form-group">
                                <label class="control-label">用户ID：&nbsp;</label>
                                <input type="text" name="userId" class="form-control">
                            </div>
                            <div class="form-group">
                                <label class="control-label"><input type="checkbox" value="1" name="hasEx"> 发生异常</label>
                            </div>


                            <button type="button" class="btn btn-info btn-xs btn-search-more-open" onclick="moreSearchCondition(this, 'search-bar-more')">
<!--                                <i class="fa fa-angle-double-right"></i>-->
<!--                                展开&nbsp;<i class="fa fa-angle-left"></i>-->
                            </button>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="search-bar-more" id="search-bar-more">
                                <div class="form-group">
                                    <label class="control-label">服务器IP：&nbsp;</label>
                                    <input type="text" name="serverIp" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label class="control-label">业务编号：&nbsp;</label>
                                    <input type="text" name="businessId" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label class="control-label">块ID：&nbsp;</label>
                                    <input type="text" name="spanId" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label class="control-label">父块ID：&nbsp;</label>
                                    <input type="text" name="parentId" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label class="control-label">应用名：&nbsp;</label>
                                    <input type="text" name="appName" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label class="control-label">类名：&nbsp;</label>
                                    <input type="text" name="className" class="form-control">
                                </div>

                            </span>
<!--                            <div class="form-group">-->
<!--                                <span class="label label-info" onclick="moreCondition()">展开&nbsp;<i class="fa fa-angle-double-right"></i></span>-->
<!--                            </div>-->




                            <button type="button" class="btn btn-primary" onclick="joView.select()"> <i class="fa fa-search" aria-hidden="true"></i>&nbsp;查询</button>
                        </form>
                        <!--/检索栏-->
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <!--按钮栏-->
                        <div class="form-group button-bar">
                            <!--<button isShow="" type="button" class="btn btn-primary" onclick="joView.add()">
                                <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;新增
                            </button>-->
                            <button isShow="" type="button" class="btn btn-danger" onclick="clearAllData()">
                                <i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp;清空链路数据
                            </button>
                            <button isShow="" type="button" class="btn btn-danger" onclick="clearDataBeforeOneMonth()">
                                <i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp;删除一个月前的数据
                            </button>
                            <button type="button" class="btn btn-danger" onclick="joView.del()">
                                <i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp;删除
                            </button>
                            <button type="button" class="btn btn-warning" onclick="window.location.reload()">
                                <i class="fa fa-refresh" aria-hidden="true"></i>&nbsp;刷新
                            </button>
                        </div>
                        <!--/按钮栏-->
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="table-bar">
                            <!--grid-->
                            <div class="table-responsive" style="overflow: visible;">
                                <table class="table table-bordered table-hover" id="mainList" dataUrl="{URL_MONITOR}monitor/apiTrace/getPage" deleteUrl="{URL_MONITOR}monitor/apiTrace/delete" formUrl="/page/monitor/traceForm.html">

<!--                                    <col field="businessId" title="业务ID" width="15%" align=""  tips="businessId" />-->
                                    <col field="key" title="KEY" width="30%" align="" tips="key"/>
                                    <col field="keyInfo" title="描述" width="15%" align=""  tips="keyInfo" />
                                    <col field="{traceId} # {businessId}" title="链路ID # 业务ID" width="22%" align="" event="" tips="traceId" />

                                    <col field="userName" title="用户" width="130px" align=""  />
                                    <col field="[=jo.formatTimestamp('{beginTime}')]" title="开始时间" width="185px" align=""  order="beginTime"/>
<!--                                    <col field="[=jo.formatTimestamp('{endTime}')]" title="结束时间" width="15%" align=""  order="endTime"/>-->
                                    <col field="ms" title="耗时(ms)" width="100px" align="right"  order="ms"/>
                                    <col field="_opt" title="操作" width="150px" align="" />
                                   <!-- <col field="serverIp" title="服务器IP" width="15%" align=""  />
                                    <col field="hasEx" title="是否发生异常" width="15%" align=""  />
                                    <col field="inParam" title="入参" width="15%" align=""  />
                                    <col field="outParam" title="出参" width="15%" align=""  />-->
                                    <!--<col field="userId" title="用户id" width="15%" align=""  />-->
                                </table>
                            </div>
                            <!--/grid-->

                            <!--分页条-->
                            <div class="page-bar" gridId="mainList">

                            </div>
                            <!--/分页条-->
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script type="text/javascript">
    $(function(){
        joView.init({grid:$("#mainList"),PKName:"id",winTitleOfUpdate:'监控详情',winRender:'top'});//初始化页面
    });
    //表格渲染时行处理,参数1为当前行的数据对象,参数2为当前行的索引值(最小为0)
    joView.handleItem = function(oItem,iIndex){
        if(oItem.hasEx){
            oItem['_css'] = 'font-red';
        }
        //oItem._opt = '<button type="button" class="btn btn-sm btn-primary" onclick="joView.edit(\''+oItem.id+'\')"><i class="fa fa-file-text-o" aria-hidden="true"></i>&nbsp;详情</button>';
        //oItem._opt += '&nbsp;<button type="button" class="btn btn-sm btn-success" onclick="lookTraceChart(\''+oItem.id+'\', \''+oItem.traceId+'\')"><i class="fa fa-bar-chart" aria-hidden="true"></i>&nbsp;链路图</button>';
        oItem._opt = '&nbsp;<div class="btn-group" style="z-index: '+(1000-iIndex)+';"> <button type="button" class="btn btn-sm btn-success" onclick="joView.edit(\''+oItem.id+'\')"><i class="fa fa-file-text-o" aria-hidden="true"></i>&nbsp;详情</button>' +
                '<button type="button" class="btn btn-sm btn-success dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">切换下拉菜单</span> </button>' +
                '<ul class="dropdown-menu" role="menu" style="min-width: 5em;">' +
                '<li><a class="cursor-hand" onclick="lookTraceChart(\''+oItem.id+'\', \''+oItem.traceId+'\')"><i class="fa fa-bar-chart" aria-hidden="true"></i>&nbsp;链路图</a></li>' +
                '<li><a class="cursor-hand" onclick="lookApiChart(\''+oItem.key+'\', \''+oItem.appName+'\', \''+oItem.keyInfo+'\')"><i class="fa fa-bar-chart" aria-hidden="true"></i>&nbsp;接口监控</a></li>' +
                '</ul></div>';
    };
    //表格渲染完成后的回调,参数为表格数据(数组对象)
    joView.setGridDataAfter = function(oList){

    };
    /* 关于joView更多回调函数和配置参数可查看jo-page-view.js */
    //查看链路图
    function lookTraceChart(id, traceId){
        if (top && top.jo && top.jo.showWin) {
            top.jo.showWin('/page/monitor/traceChart.html?id=' + id + '&traceId=' + traceId, '75%', joView.params["formHeight"], '链路图');
        } else {
            jo.showWin('/page/monitor/traceChart.html?id=' + id + '&traceId=' + traceId, '75%', joView.params["formHeight"], '链路图');
        }
    }
    //查询接口监控
    function lookApiChart(key, app, keyInfo){
        if(top == window.parent && typeof (window.parent.openPageOnTabs) == 'function'){
            window.parent.openPageOnTabs('/page/monitor/apiChart.html?app=' + app + '&key=' + key, 'API-' + keyInfo);
        }else{
            jo.newWindow('/page/monitor/apiChart.html?app=' + app + '&key=' + key);
        }
    }

    //清空数据
    function clearAllData() {
        jo.confirm('您确定要清空所有链路数据嘛（清空后无法回滚）？', function (idx){
            jo.postAjax('{URL_MONITOR}monitor/apiTrace/clearAllData', {}, function (json) {
                if (json && json.code == 0) {
                    jo.showSuccessMsg('清空完毕!');
                    joView.reloadCurrentPage();
                } else {
                    jo.showErrorMsg('清空失败!');
                }
            }, true);
            jo.close(idx);
        });

    }

    //清空数据
    function clearDataBeforeOneMonth() {
        jo.confirm('您确定要删除一个月前的链路数据嘛（删除后无法回滚）？', function (idx){
            jo.postAjax('{URL_MONITOR}monitor/apiTrace/clearDataBeforeOneMonth', {}, function (json) {
                if (json && json.code == 0) {
                    jo.showSuccessMsg('删除完毕!');
                    joView.reloadCurrentPage();
                } else {
                    jo.showErrorMsg('删除失败!');
                }
            }, true);
            jo.close(idx);
        });

    }
</script>
</body>
</html>
